<template>
	<view>
		<view class="headers">

		</view>
		<view class="searchTop" v-show="!typeSearch">
			<u-icon name="arrow-left" @tap="onBack()" color="#9c9c9c" size="21"></u-icon>
			<view class="searchTops" @tap="onTypeSearch()">
				<view class="searchTopIcon">
					<u--image src="/static/search/searchIcon.png" width="20" height="20" shape="circle">
					</u--image>
				</view>
				<input placeholder="输入好友昵称、电话号码" class="inputs" placeholder-class="nav-input-placeholder" type="text">
			</view>
		</view>
		<view class="searchTop searchDetail" v-show="typeSearch">
			<view class="searchDeleteFontTops">
				<view class="searchTopDeleteFontIcon" v-if="textValue.length" @tap="onDeleteFont()">
					<u--image src="/static/search/deleteFont.png" width="20" height="20" shape="circle">
					</u--image>
				</view>
				<input placeholder="输入好友昵称、电话号码" :focus="focusType" @confirm="setConfirm" id="inputSearch" class="inputs"
					placeholder-class="nav-input-placeholder" v-model="textValue" @input="onInput" confirm-type="search">
			</view>
			<view @tap="onCancel()">
				取消
			</view>
		</view>
		<view class="line"></view>
		<view class="searchBottom" v-show="!typeSearch">
			<view class="searchFont">
				<view class="text">
					搜索历史
				</view>
				<view class="searchDetailIcon">
					<u--image src="/static/search/detail.png" width="20" @tap="onDetail()" height="20" shape="circle">
					</u--image>
				</view>
			</view>
			<view class="datas">
				<view class="listData" v-if="searchHistoryList.length">
					<view class="lists" v-for="(item, index) in searchHistoryList" :key="index" @tap="onGotoSearchPage(item.name)">
						{{item.name}}
					</view>
				</view>
				<view class="noDatas" v-else>
					<view class="noData">
						<u--image src="/static/search/listSearchNoData.png" width="115rpx" height="115rpx"
							shape="circle">
						</u--image>
					</view>
					<view class="noDataFont">
						暂无搜索记录
					</view>
				</view>
			</view>
		</view>
		<view class="searchBottomList" v-show="typeSearch">
			<view class="datas">
				<view class="listData" v-if="list.length">
					<view class="lists" v-for="(item, index) in list" :key="index">
						<view class="listLeft" @tap="onGotoUserInfo(item, index)">
							<view class="listImg">
								<u--image :src="item.avator" width="72rpx" height="72rpx" shape="circle">
								</u--image>
							</view>
							<view class="listFont">
								<view class="name">
									{{item.username}}
								</view>
								<view class="fensi">
									粉丝数：{{item.fens}}
								</view>
							</view>
						</view>
						<view class="follow" @tap="followClick(item, index)">
							<u-icon v-if="!item.follow" name="plus" color="rgba(51, 51, 51, 1)" size="10" style="margin-right: 10rpx;">
							</u-icon>
							{{!item.follow ? '关注' : item.follow == 1 ? '已关注' : '互相关注'}}
						</view>
					</view>
				</view>
				<view class="noDatas" v-else-if="textValue != ''&& !loading">
					<view class="noData">
						<u--image src="/static/search/listSearchNoData.png" width="115rpx" height="115rpx"
							shape="circle">
						</u--image>
					</view>
					<view class="noDataFont">
						<view>
							哎呀，没有找到叫做“{{textValue}}”小镇居民
						</view>
						<view>
							请重新确认搜索信息
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup bgColor="transparent" :show="show">
			<view class="popups">
				<view class="popupFont">
					确定要清空搜索记录
				</view>
				<view class="btn">
					<view class="btnSuccess" @tap="onSuccess()">
						确认清空
					</view>
					<view class="btnClose" @tap="show = false">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup bgColor="transparent" :show="takeOffPopup">
			<view class="takeOffPopups">
				<view class="popupFont">
					你确定要取消关注该用户吗？
				</view>
				<view class="btn">
					<view class="btnSuccess" @tap="onTakeOff()">
						不再关注
					</view>
					<view class="btnClose" @tap="takeOffPopup = false">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		fuzzy_search
	} from '@/api/collection.js'
	import {
		userFollowAddApi,
	} from '@/api/index.js'
	export default {
		data() {
			return {
				textValue: '',
				show: false, //是否弹出底部删除
				typeSearch: false, //是否在搜索中
				list: [],
				searchHistoryList: [], //搜索记录
				loading: true,
				takeOffPopup: false, //取关弹框
				userData: { //单个用户数据
					data: {},
					index: 0
				},
				index:0,
				focusType: false,
				pageData: {//他人的详情返回数据
					index: 0,
					type: '',
					typeFollow: false
				}
			}
		},
		computed: {
			...mapState({
				searchHistory: state => state.searchHistory
			})
		},
		watch: {
			// async textValue() {
				
			// }
		},
		onLoad() {
			this.getSearchHistory()
		},
		onShow(){
			uni.$once('clickType', (e) =>{
				this.$nextTick(()=>{
					if (e.pageData.type) {
						if (this.list[e.pageData.index].is_fens && e.pageData.typeFollow) {
							this.list[e.pageData.index].follow = 2
						} else if (!this.list[e.pageData.index].is_fens && e.pageData.typeFollow) {
							this.list[e.pageData.index].follow = 1
						} else {
							this.list[e.pageData.index].follow = 0
						}
					}
				})
			})
		},
		onNavigationBarSearchInputConfirmed() {
			this.onPushSetSearch()
		},
		methods: {
			...mapMutations(['setSearchHistory']),
			onInput(e){
				setTimeout(()=>{
					this.textValue = e.detail.value
					console.log('输入结果:',this.textValue)
					if (this.textValue) {
						uni.showLoading({
							title:'搜索中'
						})
						this.loading = true
						this.list = []
						this.onGetData();
					}
				}, 0)
			},
			async onGetData(){
				try {
					const res = await fuzzy_search({
						fuzzy_search: this.textValue,
						page: 1
					})
					this.list = res.data.data.data
					this.loading = false
					uni.hideLoading()
				} catch (e) {
					console.log(e)
				}
			},
			//取消关注
			async onTakeOff() {
				try {
					// 取关操作
					const res = await userFollowAddApi({
						beFollowId: this.userData.data.id,
						following: false
					})
					this.list[this.userData.index].follow = 0
					this.$refs.uToast.show({
						type: 'default',
						message: "取消关注成功"
					});
					this.takeOffPopup = false
				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.message || e.data
					});
				}
			},
			//关注点击
			/**
			 * @param {Object} item  item.follow  0未关注1关注了2互相关注
			 * @param {Object} index 下标
			 */
			async followClick(item, index) {
				console.log(item)
				try {
					if (!item.follow) {
						// 关注操作
						let message;
						const res = await userFollowAddApi({
							beFollowId: item.id,
							following: true
						})
						//判断对方是否关注了你
						if (item.is_fens) {
							this.list[index].follow = 2
						} else {
							this.list[index].follow = 1
						}
						message = '关注成功'
						this.$refs.uToast.show({
							type: 'default',
							message: message
						});
					} else if (item.follow == 1) {
						this.userData.data = item
						this.userData.index = index
						this.takeOffPopup = true
					}

				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.message || e.data
					});
					//TODO handle the exception
				}
			},
			//添加记录
			setConfirm() {
				if(!this.textValue){
					this.$refs.uToast.show({
						type: 'default',
						message: "请输入好友昵称或电话号码"
					});
					return false
				}
				this.getSearchHistory();
				console.log(this.searchHistoryList)
				if (this.searchHistoryList.length > 9) {
					this.searchHistoryList.splice(9, 1)
				}
				this.searchHistoryList.unshift({
					name: this.textValue
				})
				uni.setStorageSync('searchHistory', this.searchHistoryList)
				this.onGotoSearchPage(this.textValue)
			},
			//跳转搜索
			onGotoSearchPage(text){
				uni.navigateTo({
					url:`/pages/user/search/searchPage?textValue=${text}`
				})
			},
			//获取记录
			getSearchHistory() {
				let searchHistory = uni.getStorageSync('searchHistory')
				if (searchHistory.length) {
					this.searchHistoryList = searchHistory;
				} else {
					this.searchHistoryList = []
				}
			},

			//删除输入框
			onDeleteFont() {
				this.textValue = ''
				this.list = []
			},
			//用户点击搜索按钮
			onPushSetSearch() {
				// this.setSearchHistory()
			},
			//跳转用户详情页面
			onGotoUserInfo(item,index) {
				uni.navigateTo({
					url: `/pages/community/userInfo?userId=${item.id}&index=${index}&type=searchType`
				})
			},
			//点击切换
			onTypeSearch() {
				this.typeSearch = true
				// this.inputSearch = 
				this.$nextTick(()=>{
					this.focusType = true
				})
				// var oInput = document.getElementById('inputSearch');
				// console.log(oInput)
				// oInput.focus();
			},

			//返回上一页
			onBack() {
				uni.navigateBack()
			},
			onDetail() {
				if (uni.getStorageSync('searchHistory').length) {
					this.show = true
				} else {
					this.$refs.uToast.show({
						type: 'default',
						message: "暂无搜索记录"
					});
				}
			},
			onSuccess() {
				this.show = false
				uni.setStorageSync('searchHistory', [])
				this.getSearchHistory()
			},
			//点击取消
			onCancel() {
				this.getSearchHistory()
				this.typeSearch = false
				this.textValue = ''
				this.list = []
				this.$nextTick(()=>{
					this.focusType = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headers {
		height: var(--status-bar-height);
		width: 100%;
	}

	.takeOffPopups {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		width: 82%;
		margin: 20rpx auto 100rpx;

		.popupFont {
			font-size: 32rpx;
			font-weight: 700;
			margin-bottom: 60rpx;
			text-align: center;
		}

		.btn {
			.btnSuccess {
				margin: 53rpx 0;
				width: 100%;
				text-align: center;
			}

			.btnClose {
				background: #ababab;
				border-radius: 60rpx;
				padding: 37rpx 0;
				width: 100%;
				text-align: center;
				color: #000000;
				font-weight: 700;
			}
		}
	}

	.popups {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		width: 82%;
		margin: 20rpx auto 100rpx;

		.popupFont {
			font-size: 32rpx;
			font-weight: 700;
			margin-bottom: 60rpx;
			text-align: center;
		}

		.btn {
			.btnSuccess {
				background: #000000;
				border-radius: 60rpx;
				padding: 37rpx 0;
				width: 100%;
				text-align: center;
				color: #ffffff;
			}

			.btnClose {
				margin-top: 53rpx;
				font-weight: 700;
				width: 100%;
				text-align: center;
			}
		}
	}

	.searchDetail {
		justify-content: space-around;
	}

	.searchTop {
		display: flex;
		align-items: center;
		margin: 30rpx 30rpx 60rpx;
		transition: all .5s;

		.searchTops {
			display: flex;
			align-items: center;
			position: relative;
			background-color: #f3f3f3;
			padding: 20rpx;
			margin-left: 20rpx;
			border-radius: 60rpx;
			width: 100%;

			.searchTopIcon {
				position: absolute;
			}

			.inputs {
				margin-left: 50rpx;
				width: 100%;
			}

			.nav-input-placeholder {
				font-size: 26rpx;
			}
		}

		.searchDeleteFontTops {
			display: flex;
			align-items: center;
			position: relative;
			background-color: #f3f3f3;
			padding: 20rpx;
			border-radius: 60rpx;
			width: 80%;

			.searchTopDeleteFontIcon {
				position: absolute;
				right: 30rpx;
				z-index: 2;
			}

			.inputs {
				margin-left: 20rpx;
				width: 100%;
			}

			.nav-input-placeholder {
				font-size: 26rpx;
			}
		}
	}

	.line {
		width: 90%;
		height: 2rpx;
		background: #efefef;
		margin: auto;
	}

	.searchBottomList {
		margin: 40rpx 35rpx 30rpx;

		.listData {
			.lists {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 35rpx;
				border-bottom: 2rpx solid #efefef;
				padding-bottom: 35rpx;

				.listLeft {
					display: flex;
					align-items: center;

					.listImg {
						border-radius: 50%;
						overflow: hidden;
						margin-right: 22rpx;
					}

					.listFont {
						.name {
							font-weight: 700;
							font-size: 28rpx;
							margin-bottom: 10rpx;
							white-space:nowrap;
							overflow:hidden;
							text-overflow:ellipsis;
							width: 400rpx
						}

						.fensi {
							font-size: 22rpx;
							color: #aaaaaa;
						}
					}
				}

				.follow {
					padding: 0 30rpx;
					height: 60rpx;
					justify-content: space-around;
					color: rgba(51, 51, 51, 1);
					font-size: 22rpx;
					border-radius: 40rpx;
					border: 2rpx solid rgba(51, 51, 51, 1);
					display: flex;
					align-items: center;
				}
			}
		}

		.noDatas {
			margin-top: 100rpx;

			.noData {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.noDataFont {
				text-align: center;
				font-size: 27rpx;
				color: #afafb0;
				margin-top: 10rpx;
			}
		}
	}

	.searchBottom {
		margin: 40rpx 35rpx 30rpx;

		.searchFont {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text {
				font-size: 28rpx;
				font-weight: 700;
			}
		}

		.listData {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.lists {
				border: 2rpx solid #b6b6b6;
				font-size: 24rpx;
				padding: 20rpx 40rpx;
				border-radius: 10rpx;
				margin: 20rpx 15rpx 0 0;
			}
		}

		.noDatas {
			margin-top: 100rpx;

			.noData {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.noDataFont {
				text-align: center;
				font-size: 27rpx;
				color: #afafb0;
				margin-top: 10rpx;
			}
		}
	}
</style>
